<template>
  <div class="columns">
    <div class="column is-full">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><em class="fa fa fa-book"> 报修 </em></span>
        </div>
        <div>
          <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              class="demo-ruleForm" label-width="160px"
          >

            <el-form-item prop="applicantName" label="申请人姓名" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.applicantName"
                    placeholder="请输入申请人姓名"
                />
              </el-col>
            </el-form-item>

            <el-form-item prop="itemName" label="报修物品" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.itemName"
                    placeholder="请输入维修物品"
                />
              </el-col>
            </el-form-item>

            <el-form-item prop="damagedLevel" label="损坏程度" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.damagedLevel"
                    placeholder="损坏程度"
                />
              </el-col>
            </el-form-item>


            <el-form-item prop="location" label="维修地点" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.location"
                    placeholder="请输入维修地点"
                />
              </el-col>
            </el-form-item>

            <el-form-item prop="tel" label="联系电话" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.tel"
                    placeholder="请输入联系电话"
                />
              </el-col>
            </el-form-item>

            <el-form-item prop="details" label="详细描述" required>
              <el-col :span="11">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请简单描述损坏情况"
                    v-model="ruleForm.details">
                </el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm()"
              >提交
              </el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import {addReq} from "@/api/repair";

export default {
  name: "repairReq",

  data() {

    return {
      ruleForm: {
        applicantName: "",
        itemName: "",
        damagedLevel: "",
        details: "",
        location: "",
        tel: "",
      },
      rules: {}

    }
  },

  methods: {

    submitForm() {
      addReq(this.ruleForm).then((response) => {
        this.$message({
          message: response.message,
          type: 'success'
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>

</style>
